<!--template定义模板内容-->
<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
<!--    下面一行的Cpn就是这个App组件的子组件  -->
    <Cpn></Cpn>
  </div>
</template>

<script>
//此处还可以导入其他定义的.vue组件，导入过后需要在下面导出中使用components注册组件，然后就可以在上面的template中使用引入的Cpn组件了
import Cpn from './Cpn.vue'


// export default表示默认导出一个名字叫App的模板
    export default {
        name: "App",
        components:{
          Cpn,
        },
        data(){
            return{
                message:'Hello World!',
                name:'coder why',
            }
        },
        methods:{
            btnClick(){
                console.log("点击了按钮")
            },
        }
    }
</script>

<!--下面用于编写CSS代码-->
<style scoped>
  .title{
    color: green;
  }
</style>